/* components */
import QualificationStatusDialog from '@src/modules/setting/messageChannel/components/qualification/status-dialog'
import QualificationCreateDialog from '@src/modules/setting/messageChannel/components/qualification/dialog/create'
import QualificationEditDialog from '@src/modules/setting/messageChannel/components/qualification/dialog/edit'
import QualificationViewDialog from '@src/modules/setting/messageChannel/components/qualification/dialog/view'
/* hooks */
import { useDialog } from '@hooks/useDialog'
/* vue */
import { defineComponent, PropType } from 'vue'
/* model */
import { 
  SMSQualificationDialogButtonEnum, 
  SMSQualificationDialogStatusEnum, 
  SMSQualificationStatusEnum 
} from '@src/modules/setting/messageChannel/components/qualification/model/enum'
import { getQualificationState } from '@src/api/MessageApi'
import MsgModel from '@model/MsgModel'
import { message } from '@src/util/message'
import { GetQualificationData } from '@src/modules/setting/messageChannel/components/qualification/model/type'
import { GetQualificationStateResult } from '@model/param/out/Message'
import { isFalsy, isPlainObject } from 'pub-bbx-utils'

type QualificationStatusDialogComponent = InstanceType<typeof QualificationStatusDialog>
type QualificationCreateDialogComponent = InstanceType<typeof QualificationCreateDialog>
type QualificationEditDialogComponent = InstanceType<typeof QualificationEditDialog>
type QualificationViewDialogComponent = InstanceType<typeof QualificationViewDialog>

export default defineComponent({
  name: 'QualificationDialog',
  props: {
    
  },
  setup(props, { emit }) {
    
    const { visible: insideVisible, showDialog, hideDialog } = useDialog()
    
    return {
      visible: insideVisible,
      showDialog,
      hideDialog,
    }
    
  },
  data() {
    return {
      status: null as SMSQualificationStatusEnum | null,
      initStatusLoading: false,
      getQualificationDataLoading: false,
      qualificationData: null as GetQualificationData | null,
      errorMsg: ''
    }
  },
  computed: {
    qualificationStatusDialogComponent(): QualificationStatusDialogComponent {
      return this.$refs.QualificationStatusDialog as QualificationStatusDialogComponent
    },
    qualificationCreateDialogComponent(): QualificationCreateDialogComponent {
      return this.$refs.QualificationCreateDialog as QualificationCreateDialogComponent
    },
    qualificationEditDialogComponent(): QualificationEditDialogComponent {
      return this.$refs.QualificationEditDialog as QualificationEditDialogComponent
    },
    qualificationViewDialogComponent(): QualificationViewDialogComponent {
      return this.$refs.QualificationViewDialog as QualificationViewDialogComponent
    },
    statusDialogAttr(): Record<string, any> {
      return {
        // 指令
        directives: [
          {
            name: 'loading',
            value: this.initStatusLoading
          }
        ]
      }
    },
    qualificationDialogAttr(): Record<string, any> {
      return {
        // 指令
        directives: [
          {
            name: 'loading',
            value: this.getQualificationDataLoading
          }
        ]
      }
    }
  },
  methods: {
    /**
     * @description 初始化资质认证状态
     */
    async initStatus() {
      try {
        
        this.initStatusLoading = true
        
        const result = await getQualificationState()
        const isFail = MsgModel.isFail(result)
        if (isFail) {
          message.error(result.message)
          return
        }

        const data = MsgModel.getData<GetQualificationStateResult>(result, {} as GetQualificationStateResult)
        
        if (isFalsy(isPlainObject(data))) {
          this.status = data as unknown as SMSQualificationStatusEnum
          this.errorMsg = ''
          return
        }
        
        const state = data?.qualificationState as unknown as SMSQualificationStatusEnum
        const errorMsg = data?.errorMsg || ''
        
        this.status = state
        this.errorMsg = errorMsg
        
      } catch (error) {
        console.error(error)
      } finally {
        this.initStatusLoading = false
      }
    },
    /**
     * @description 获取资质认证数据
     */
    async getQualificationData() {
      try {
        
        this.getQualificationDataLoading = true
        
        const result = await getQualificationState()
        const isFail = MsgModel.isFail(result)
        if (isFail) {
          message.error(result.message)
          return
        }
        
        this.qualificationData = MsgModel.getData(result, {} as GetQualificationData)
        
      } catch (error) {
        console.error(error)
      } finally {
        this.getQualificationDataLoading = false
      }
    },
    /**
     * @description 打开资质认证状态弹窗
    */
    openStatusDialog() {
      this.initStatus()
      this.qualificationStatusDialogComponent.openDialog()
    },
    onCreateHandler() {
      this.qualificationCreateDialogComponent.openDialog()
    },
    onEditHandler() {
      this.qualificationEditDialogComponent.openDialog()
    },
    onViewHandler() {
      this.qualificationViewDialogComponent.openDialog()
    }
  },
  render() {
    return (
      <div class="qualification-dialog">
        
        <QualificationStatusDialog
          ref="QualificationStatusDialog"
          {...this.statusDialogAttr}
          status={this.status}
          errorMsg={this.errorMsg}
          onCreate={this.onCreateHandler}
          onEdit={this.onEditHandler}
          onView={this.onViewHandler}
        >
        </QualificationStatusDialog>
        
        <QualificationCreateDialog
          ref="QualificationCreateDialog"
          onClose={this.hideDialog}
        >
        </QualificationCreateDialog>
        
        <QualificationEditDialog
          {...this.qualificationDialogAttr}
          ref="QualificationEditDialog"
          onClose={this.hideDialog}
        >
        </QualificationEditDialog>

        <QualificationViewDialog
          {...this.qualificationDialogAttr}
          ref="QualificationViewDialog"
        >
        </QualificationViewDialog>
        
      </div>
    )
  }
})